<template>
    <div class="selector">
        <el-form ref="form" :inline="true" :model="form" label-width="120px">
            <el-form-item :label="mapLabel[item]" v-for="(item, index) in selectors" :key="index">
                <el-date-picker
                    v-if="item === 'time'"
                    size="small"
                    v-model="form.value1"
                    type="datetimerange"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :default-time="['12:00:00']"
                >
                </el-date-picker>
                <el-input size="small" v-if="item === 'plan'" placeholder="计划名称和ID搜索" clearable v-model="form.name"></el-input>
                <el-radio-group v-if="item === 'sys'" v-model="form.resource">
                    <el-radio label="1">ios</el-radio>
                    <el-radio label="2">安卓</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item>
                <el-button size="small" type="primary" @click="onSearch">筛选</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
export default {
    props: {
        items: Array
    },
    data() {
        return {
            form: {
                resource: null,
                value1: null,
                name: null
            },
            selectors: this.items,
            mapLabel: {
                time: "时间：",
                plan: "广告计划：",
                sys: "操作系统："
            }
        };
    },
    methods: {
        onSearch() {
            let params = {};
            for (let i in this.form) {
                if (this.form[i]) {
                    params[i] = this.form[i];
                }
            }
            this.$emit("onSearch", params);
        }
    }
};
</script>
<style lang="scss">
.selector {
    width: 100%;
    background-color: #ffffff;
    overflow: hidden;
    .el-form-item {
        margin-bottom: 0 !important;
    }
}
</style>
